<style>
  .rent-resource .unit-table {
    border: 1px solid #e5e5e5;
    border-bottom: none;
  }

  .gradient-color {
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
  }

  .bill-close-image {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: -2px;
  }

  .bill-open-image {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: -2px;
  }

  .isStyleCommis {
    background: #f1f1f1;
  }

  .operaTionArea {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #F2F2F2
  }

  .CZOpenArea {
    height: 27px;
    overflow: hidden;
  }

  .OTA_title,
  .OTA_person {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .OTA_typeBox {
    display: flex;
    margin-bottom: 10px;
  }

  .OTA_type {
    flex-wrap: wrap;
  }

  .OTA_type>ul>li {
    margin-bottom: 10px;
  }

  .OTA_typeBox>div:nth-child(1) {
    min-width: 105px;
    margin-right: 40px;
  }

  .OTA_typeBox>div:nth-child(1)::before {
    display: inline-block;
    content: '';
    width: 6px;
    height: 6px;
    background: rgba(216, 216, 216, 1);
    border-radius: 50%;
    margin-right: 10px;
  }

  .OTA_person {
    color: #999;
  }

  .OTA_title>li:nth-child(1) {
    color: #929BA8
  }

  .OTA_title>li:nth-child(2) {
    cursor: pointer;
    color: #337AB7
  }

  .OTA_mask {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D8D8D8
  }

  .width-max input {
    height: 40px;
  }

  #merger_payment {
    margin: 24px;
  }

  .hl-select-container .input-wrap {
    width: 100% !important;
  }

  .hl-select-dropdown-wrap {
    width: 100% !important;
  }

  .global_table_title>div,
  .global_table_item>div>div>div {
    padding: 0 5px;
  }

  .inputStyle{
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<section id="merger_payment">
  <div class="bill-edit-head border-b">应收账款-合并收款</div>
  <!-- 费用结算 -->
  <div class="bill-settlement mt-15">
    <div>客户：{{customName}}</div>
    <h3 class="font-16">费用结算</h3>
    <div class="bill-set-list">
      <div class="dy-flex">
        <div class="dy-fx-1"><span class="color-ec4151">*</span>本次实收本金：</div>
        <div class="dy-fx-2"><input type="number" class="form-control received-money" v-model="amountWpay" @change="setAmountWpay" :disabled="total < 0?true:false"></div>
        <div class="dy-fx-4"><span class="ml-10">元</span></div>
      </div>
      <div class="dy-flex mt-10" v-if="total>=0">
        <div class="dy-fx-1"><span class="color-ec4151">*</span>本次实收滞纳金：</div>
        <div class="dy-fx-2"><input type="number" class="form-control received-money" v-model="lateFeeTPay" @change="setLateFeeTPay"></div>
        <div class="dy-fx-4"><span class="ml-10">元</span></div>
      </div>
      <div class="dy-flex mt-10">
        <div class="dy-fx-1"><span class="color-ec4151">*</span>收款方式：</div>
        <div class="dy-fx-2">
          <hl-select :data="payfn" v-model="selectedPay" style="width: 100%;" type="primary" placeholder="请选择收款方式"></hl-select>
        </div>
        <div class="dy-fx-4"></div>
      </div>
      <div class="dy-flex mt-15">
        <div class="dy-fx-1"><span class="color-ec4151">*</span>收款时间：</div>
        <div class="dy-fx-2">
          <web-calendar type="primary" v-model="paymentTime"></web-calendar>
        </div>
        <div class="dy-fx-4"><span class="ml-10"></span></div>
      </div>
			
			<div class="dy-flex mt-10">
			  <div class="dy-fx-1"><span style="color: #fff;">*</span>收款账户：</div>
			  <div class="dy-fx-2">
			    <hl-select :data="receiptAccountList" v-model="accountCode" style="width: 100%;" type="primary" placeholder="请选择收款账户"></hl-select>
			  </div>
			  <div class="dy-fx-4"></div>
			</div>
			
      <div class="dy-flex mt-15">
        <div class="dy-fx-1"><span style="color: #fff;">*</span>收款单号：</div>
        <div class="dy-fx-2">
          <input type="text" class="form-control" v-model="paymentNo">
        </div>
        <div class="dy-fx-4"><span class="ml-10"></span></div>
      </div>
      <div class="dy-flex mt-15">
        <div class="dy-fx-1"><span style="color: #fff;">*</span>说明：</div>
        <div class="dy-fx-3">
          <textarea class="form-control" v-model="memo"></textarea>
        </div>
        <div class="dy-fx-3"><span class="ml-10"></span></div>
      </div>
      <div class="dy-flex mt-15">
        <div class="dy-fx-1"><span style="color: #fff;">*</span>收款凭证：</div>
        <div class="dy-fx-4">
          <div class="bill-img" v-for="(item,index) in fileList" style="marginBottom:10px;">
            <img :src="item" alt="">
            <span @click="delPic(index)">删除</span>
          </div>
          <div class="bill-addImg" v-if="fileList.length < 15" @click="uploadImg">+</div>
          <div>建议上传大小不超过2M的JPG或PNG格式图片，最多上传15张</div>
        </div>
        <div class="dy-fx-2"><span class="ml-10"></span></div>
      </div>
    </div>
  </div>
  <!-- 费用明细 -->
  <div v-if="costList.length">
    <h3 class="font-16">费用明细</h3>
    <div class="global_table" style="overflow: auto;">
      <div class="br-4 bill-line-height expenses-table global_table" style="border:1px solid #E5E5E5;width:1200px">
        <div class="clearfix dy-flex text-center global_table_title">
          <div class="dy-fx-3">资源</div>
          <div class="dy-fx-2">费项</div>
          <div class="dy-fx-3">单价（元/月）</div>
          <div class="dy-fx-3">账期</div>
          <div class="dy-fx-2">金额（元）</div>
          <div class="dy-fx-2">备注</div>
          <div class="dy-fx-2">本次实收本金</div>
          <div class="dy-fx-2" v-if="total>=0">本次实收滞纳金</div>
        </div>
        <div class="global_table_item text-center css-overflow">
          <div v-for="(item, index) in costList">
            <div class="border-t dy-flex clearfix global_table_item js-expenses-item"
              v-for="(single,one) in item.billExpenseList" v-if="item.billExpenseList && item.billExpenseList.length">
              <div class="dy-fx-3 ellipsis-1" :title="single.resourceName">{{single.resourceName}}</div>
              <div class="dy-fx-2 ellipsis-1">{{single.name || '--'}}</div>
              <div class="dy-fx-3 ellipsis-1">{{single.priceMonth || '--'}}</div>
              <div class="dy-fx-3 ellipsis-1">{{single.beginDate | timestamp}}~{{single.endDate | timestamp}}</div>
              <div class="dy-fx-2 ellipsis-1">{{single.totalAmount}}</div>
              <div class="dy-fx-2 ellipsis-1 inputStyle">
                <input type="text" class="form-control" v-model="single.memo">
              </div>
              <div class="dy-fx-2 ellipsis-1 inputStyle">
                <input type="text" class="form-control" v-model="single.onceAmountPay" @change="checkAmount(index,one,'s')" :disabled="(total < 0) || (single.totalAmount < 0 || single.ys_yt<0) ?true:false">
              </div>
              <div class="dy-fx-2 ellipsis-1 inputStyle" v-if="total>=0">
                <input type="text" class="form-control" v-model="single.onceLateFeePay" @change="checkAmount(index,one,'z')" :disabled="(single.totalAmount < 0 || single.znjAmount<0) ?true:false">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="border-t mt-15">
    <h3 class="font-16 pt-10">费用明细</h3>
    <div class="dy-flex">
      <div class="dy-fx-1">本次应收：</div>
      <div class="dy-fx-1 text-right">{{total | toFixed2 | formatNum}}</div>
      <div class="dy-fx-5">元</div>
      <div class="dy-fx-1"></div>
    </div>
    <div class="dy-flex">
      <div class="dy-fx-1">本次实收：</div>
      <div class="dy-fx-1 text-right color-orange">{{cumulation | toFixed2 | formatNum}}</div>
      <div class="dy-fx-5">元</div>
      <div class="dy-fx-1"></div>
    </div>
  </div>
  <div class="bill-submit mt-15">
    <hl-button type="primary" @on-click="submitBill">确认收款</hl-button>
    <a href="#/financeList" class="btn n-btn-outline">返回</a>
  </div>
  <div class="js-trigger-upload"></div>
  <div class="bill-settlement"></div>
</section>
<script src="modules/bill/scripts/merger_payment.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
  .color-bill-active {
    font-weight: bold;
    color: #5e67a5;
  }
</style>